<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<h1 class="hello" data-name="玩转CSS的艺术之美"></h1>

		<div class="flex">
			<div class="hover-tips btn-1" data-msg="Hello World">提示框</div>
			<div class="hover-tips btn-2" data-title="空白的占位"></div>
		</div>

		<ul class="figure-box" style="--count: 12">
			<li class="star" style="--index: 0"></li>
			<li class="ellipse" style="--index: 1"></li>
			<li class="circle" style="--index: 2"></li>
			<li class="triangle" style="--index: 3"></li>
			<li class="rhombus" style="--index: 4"></li>
			<li class="trapezoid" style="--index: 5"></li>
			<li class="parallelogram" style="--index: 6"></li>
			<li class="pentagon" style="--index: 7"></li>
			<li class="left-arrow" style="--index: 8"></li>
			<li class="right-arrow" style="--index: 9"></li>
			<li class="close" style="--index: 10"></li>
			<li class="message" style="--index: 11"></li>
			<li class="triangle2" style="--index: 12"></li>
		</ul>

		<ul class="strip-loading">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<style>
			h1 {
				&::before {
					content: attr(class);
				}
				&::after {
					content: attr(data-name);
				}
			}
			/* 
            `::before`通过`attr()`获取`<h1 class>`的属性值并赋值到`content`上
            `::after`通过`attr()`获取`<h1 data-name>`的属性值并赋值到`content`上，最终`<h1>`的`innerText`是`hello玩转CSS的艺术之美`。
            */

			.flex {
				display: flex;
				flex-direction: column;
			}
			.hover-tips {
				width: 100px;
				position: relative;
				padding: 0 20px;
				border-radius: 10px;
				height: 40px;
				text-align: center;
				background-color: #66f;
				line-height: 40px;
				color: #fff;
				& + .hover-tips {
					margin-top: 10px;
				}
				&.btn-1 {
					&::after {
						position: absolute;
						left: 0;
						top: 0;
						border-radius: 5px;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, 0.5);
						opacity: 0;
						text-align: center;
						font-size: 12px;
						content: attr(data-msg);
						transition: all 300ms;
					}
					&:hover::after {
						left: calc(100% + 40px);
						opacity: 1;
					}
				}
				&.btn-2:empty::after {
					content: attr(data-title);
				}
			}
			/* 
            - 在`按钮1`触发悬浮状态`:hover`时，通过`attr()`获取节点的`data-msg`并赋值到`::after`的`content`上
            - 当`按钮2`内容为空`:empty`时，通过`attr()`获取节点的`data-title`并赋值到`::after`的`content`上
            */

			/* 在特定坐标上标记连线的点即可 */
			.figure-box {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				max-width: 720px;
				li {
					--Θ: calc(var(--index) / var(--count) * 1turn);
					margin: 10px;
					width: 100px;
					height: 100px;
					background-color: #3c9;
					filter: hue-rotate(var(--Θ));
					&.star {
						clip-path: polygon(
							50% 0%,
							61% 35%,
							98% 35%,
							68% 57%,
							79% 91%,
							50% 70%,
							21% 91%,
							32% 57%,
							2% 35%,
							39% 35%
						);
					}
					&.ellipse {
						clip-path: ellipse(40% 50% at 50% 50%);
					}
					&.circle {
						clip-path: circle(50% at 50% 50%);
					}
					&.triangle {
						clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
					}
					&.rhombus {
						clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
					}
					&.trapezoid {
						clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
					}
					&.parallelogram {
						clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
					}
					&.pentagon {
						clip-path: polygon(
							50% 0%,
							100% 38%,
							82% 100%,
							18% 100%,
							0% 38%
						);
					}
					&.left-arrow {
						clip-path: polygon(
							40% 0%,
							40% 20%,
							100% 20%,
							100% 80%,
							40% 80%,
							40% 100%,
							0% 50%
						);
					}
					&.right-arrow {
						clip-path: polygon(
							0% 20%,
							60% 20%,
							60% 0%,
							100% 50%,
							60% 100%,
							60% 80%,
							0% 80%
						);
					}
					&.close {
						clip-path: polygon(
							20% 0%,
							0% 20%,
							30% 50%,
							0% 80%,
							20% 100%,
							50% 70%,
							80% 100%,
							100% 80%,
							70% 50%,
							100% 20%,
							80% 0%,
							50% 30%
						);
					}
					&.message {
						clip-path: polygon(
							0% 0%,
							100% 0%,
							100% 75%,
							75% 75%,
							75% 100%,
							50% 75%,
							0% 75%
						);
					}
					&.triangle2 {
						clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
					}
				}
			}

            
			.strip-loading {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 200px;
				height: 200px;
				li {
					border-radius: 3px;
					width: 6px;
					height: 30px;
					background-color: #f66;
					animation: beat 1s ease-in-out infinite;
                    list-style-type: none;
					& + li {
						margin-left: 5px;
					}
					&:nth-child(2) {
						animation-delay: 200ms;
					}
					&:nth-child(3) {
						animation-delay: 400ms;
					}
					&:nth-child(4) {
						animation-delay: 600ms;
					}
				}
			}
			@keyframes beat {
				0%,
				100% {
					transform: scaleY(1);
				}
				50% {
					transform: scaleY(0.5);
				}
			}
		</style>
	</body>
</html>
